<template>
	<view class="flex-col page">
		<u-navbar title="我的" leftIcon=" " :autoBack="true" bgColor="#fff" placeholder="true"></u-navbar>
		<view class="flex-col justify-start items-end image-wrapper">

		</view>
		<view class="flex-row items-center relative section">
			<image class="image_2" :src="avatarUrl" />

			<view class="flex-col items-start flex-1 ml-11-5" v-if="userInfo.mobile">
				<text class="text_2 u-line-1">{{userInfo.nickname}}</text>
				<view class="flex-row items-center mt-15-5" style="width: 500rpx;">
					<text class="font text text_3">{{userInfo.mobile}}</text>
					<text class="font text text_3 ml-30"
						v-if="userInfo.group_id == 2">会员到期：{{userInfo.member_expire_time}}</text>
				</view>
			</view>
			<view class="flex-col items-start flex-1 ml-11-5" v-else @click="show_auth = true">
				<text class="text_2">去登录 ></text>
			</view>
		</view>
		<view class="flex-col section_2" v-if="userInfo.mobile">
			<view class="flex-row justify-between items-center group">
				<text class="font_2 text">昵称</text>
				<text class="font_2 text_4">{{userInfo.nickname}}</text>
			</view>
			<view class="flex-row justify-between items-center group">
				<text class="font_2 text">手机号</text>
				<text class="font text text_5">{{userInfo.mobile}}</text>
			</view>
			<view class="flex-row justify-between items-center group">
				<text class="font_2 text">余额</text>
				<text class="font text text_5">{{userInfo.money}}</text>
			</view>
			<view class="flex-row justify-between items-center group" @click="$util.redirectTo('/pages/my/collect')">
				<text class="font_2 text">我的关注</text>
				<image class="image_3" src="https://www.dlxx.top/static/images/282c364b117bb65a2fcbb1d98d852015.png" />
			</view>
			<view class="flex-row justify-between items-center group" @click="$util.redirectTo('/pages/my/yq_list')">
				<text class="font_2 text">我的邀请</text>
				<image class="image_3" src="https://www.dlxx.top/static/images/282c364b117bb65a2fcbb1d98d852015.png" />
			</view>
			<view class="flex-row justify-between items-center group" @click="$util.redirectTo('/pages/my/yq')">
				<text class="font_2 text">邀请用户</text>
				<view class="flex-row items-center relative">
					<view class="yq">
						邀新用户
					</view>
					<image class="image_3"
						src="https://www.dlxx.top/static/images/282c364b117bb65a2fcbb1d98d852015.png" />
				</view>
			</view>
			<view class="flex-row justify-between items-center group" @click="$util.redirectTo('/pages/my/jsq')"
				v-if="userInfo.group_id == 2">
				<text class="font_2 text">价格计算器</text>
				<image class="image_3" src="https://www.dlxx.top/static/images/282c364b117bb65a2fcbb1d98d852015.png" />
			</view>
			<!-- <view class="flex-row justify-between items-center group" @click="$util.redirectTo('/pages/my/dh')">
				<text class="font_2 text">兑换会员</text>
				<image class="image_3" src="https://www.dlxx.top/static/images/282c364b117bb65a2fcbb1d98d852015.png" />
			</view> -->
		</view>
		<view class="flex-col justify-start relative section_3">
			<view class="flex-row equal-division">
				<view class="flex-col items-center group_4 equal-division-item"
					@click="$util.redirectTo('/pages/index/index', {}, 'reLaunch')">
					<image class="image_4"
						src="https://www.dlxx.top/static/images/119d8d9f8eca59a3b7b1ed229a678f9c.png" />
					<text class="font_3 text text_6 mt-2-5">首页</text>
				</view>
				<view class="flex-col items-center group_4 equal-division-item"
					@click="$util.redirectTo('/pages/news/index', {}, 'reLaunch')">
					<image class="image_4"
						src="https://www.dlxx.top/static/images/971ed7476151f1358a4fff73ca59b2b9.png" />
					<text class="font_3 text text_7 mt-3-5">行业资讯</text>
				</view>
				<view class="flex-col items-center group_4 equal-division-item"
					@click="$util.redirectTo('/pages/my/my', {}, 'reLaunch')">
					<image class="image_4"
						src="https://www.dlxx.top/static/images/bf4ce9e3e7c4cd21a25cef76a7222540.png" />
					<text class="font_3 text text_8 mt-3-5">我的</text>
				</view>
			</view>
		</view>

		<u-popup :show="show_auth" mode="bottom" :round="20" :closeable="true" bgColor="#f2f6f7"
			@close="show_auth = false">
			<view class="flex-col justify-center auth">
				<view class="flex-col justify-center items-center self-stretch">
					<button class="auth-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="image_6" :src="avatarUrl" />
					</button>
					<text class="text_7s">上传头像</text>
				</view>
				<view class="flex-row items-center mt-26">
					<text class="font_2">昵称</text>
					<view class="flex-col justify-center items-start nickname ml-16">
						<input v-model="formData.nickname" @blur="blurNickName" type="nickname" class="font_3"
							placeholder="请输入昵称或点击输入框获取微信昵称" placeholder-class="placeholderClass" />
					</view>
				</view>
				<view class="flex-row justify-between mt-26">
					<view class="flex-col items-start">
						<text class="font_2">手机号</text>
						<text class="text_9 mt-6">点击一键授权登录小程序</text>
					</view>
					<button class="auth-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						v-if="formData.mobile == ''">
						<view class="flex-col justify-center items-center button_2">
							<text class="text_8">一键授权</text>
						</view>
					</button>
					<view class="flex-col items-start" v-if="formData.mobile">
						<text class="font_2">{{formData.mobile}}</text>
					</view>
				</view>
				<view class="flex-col justify-center items-center button_3" @click="login">
					<text class="text_10">立即登录</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				type: 0,
				show_auth: false,
				avatarUrl: 'https://www.dlxx.top/static/images/52b8572190fdb04824436da527838801.png',
				formData: {
					headimg: '',
					nickname: '',
					mobile: '',
				},
				userInfo: [],
				// 小程序获取手机号所需数据
				authMobileData: {
					iv: '',
					encryptedData: ''
				},
			};
		},
		onLoad(options) {
			if (options.type) this.type = options.type;
			this.userInfo = uni.getStorageSync('userInfo');
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					data: {
						user_id: this.userInfo.id
					},
					success: res => {
						if (res.code == 1) {
							uni.setStorageSync('userInfo', res.data);
							this.userInfo = res.data;
							this.avatarUrl = this.userInfo.avatar ? this.$util.img(this.userInfo.avatar) :
								this.avatarUrl;
							this.formData.headimg = this.userInfo.avatar;
							this.formData.nickname = this.userInfo.nickname;
							this.formData.mobile = this.userInfo.mobile;

							if (this.type == 1 && !this.formData.mobile) this.show_auth = true;
						}
					}
				});
			},
			// 上传头像
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl;
				uni.getFileSystemManager().readFile({
					filePath: this.avatarUrl, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => {
						let base64 = 'data:image/jpeg;base64,' + res.data; //不加上这串字符，在页面无法显示的哦

						this.$api.uploadBase64({
							base64,
							user_id: this.userInfo.id,
							success: res => {
								if (res.code == 1) {
									this.formData.headimg = res.data.file;
									this.$api.sendRequest({
										url: '/api/member/modifyheadimg',
										data: {
											user_id: this.userInfo.id,
											headimg: this.formData.headimg
										},
										success: res => {
											if (res.code == 1) {
												this.$util.showToast({
													title: '上传成功'
												});
											}
										}
									});
								} else {
									this.$util.showToast({
										title: res.message
									});
								}
							},
							fail: () => {
								this.$util.showToast({
									title: '上传失败'
								});
							}
						})
					}
				});
			},
			blurNickName(e) {
				if (e.detail.value) {
					this.formData.nickname = e.detail.value;
					this.$api.sendRequest({
						url: '/api/member/modifynickname',
						data: {
							user_id: this.userInfo.id,
							nickname: this.formData.nickname
						},
						success: res => {
							if (res.code == 1) {

							}
						}
					});
				}
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					let authData = uni.getStorageSync('authInfo');
					if (authData) Object.assign(this.authMobileData, authData, e.detail);
					if (uni.getStorageSync('source_member')) this.authMobileData.source_member = uni.getStorageSync(
						'source_member');
					this.authMobileData.user_id = this.userInfo.id;

					this.$api.sendRequest({
						url: '/api/weapp/getPhoneNumber',
						data: this.authMobileData,
						success: res => {
							if (res.code == 1) {
								this.formData.mobile = res.data.phoneNumber;
								this.$api.sendRequest({
									url: '/api/member/modifymobile',
									data: {
										user_id: this.userInfo.id,
										mobile: this.formData.mobile
									},
									success: res => {
										if (res.code == 1) {
											this.$util.showToast({
												title: '获取成功'
											});
										} else {
											this.$util.showToast({
												title: res.message
											});
										}
									}
								});
							} else {
								this.formData.mobile = '';
								this.$util.showToast({
									title: res.message
								});
							}
						}
					});
				} else {
					this.$util.showToast({
						title: '为了保证您账户的统一性，取消授权将无法为您提供服务'
					})
				}
			},
			login() {
				if (!this.formData.mobile) {
					this.$util.showToast({
						title: '请授权您的手机号'
					})
					return true;
				}
				this.getUserInfo();
				this.show_auth = false;
			},
		},
	};
</script>

<style scoped lang="scss">
	.ml-11-5 {
		margin-left: 23rpx;
	}

	.mt-15-5 {
		margin-top: 31rpx;
	}

	.mt-2-5 {
		margin-top: 5rpx;
	}

	.mt-3-5 {
		margin-top: 7rpx;
	}

	.yq {
		background-image: linear-gradient(86deg, #ff934c 0%, #fc686f 100%);
		border-radius: 23rpx;
		width: 136rpx;
		height: 46rpx;
		line-height: 46rpx;
		color: #fff;
		font-size: 22rpx;
		text-align: center;
		margin-right: 20rpx;
		position: absolute;
		right: 40rpx;
		bottom: -14rpx;
	}

	.page {
		background-color: #f5f5f5;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;

		.image-wrapper {
			padding: 34rpx 0 212rpx;
			background-image: url('https://www.dlxx.top/static/images/e2f0c4f73b190b49a20243aab31d6b96.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.image {
				margin-right: 10rpx;
				width: 674rpx;
				height: 141rpx;
			}
		}

		.section {
			margin: -112rpx 16rpx 0;
			padding: 40rpx;
			background-color: #ffffff;
			border-radius: 10rpx;

			.image_2 {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.text_2 {
				color: #00140d;
				font-size: 28rpx;
				font-family: PingFangSC;
				line-height: 28rpx;
			}

			.text_3 {
				color: #000000;
				line-height: 19rpx;
			}
		}

		.section_2 {
			margin: 16rpx 12rpx;
			padding: 28rpx;
			background-color: #ffffff;
			border-radius: 10rpx;

			.group {
				padding: 30rpx 0 28rpx;
				border-bottom: solid 1rpx #eeeeee;

				.text_4 {
					color: #999999;
					line-height: 22rpx;
				}
			}


			.font_2 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 24rpx;
				color: #00140d;
			}

			.image_3 {
				margin-right: 4rpx;
				width: 10rpx;
				height: 16rpx;
			}
		}

		.text {
			text-transform: uppercase;
		}

		.font {
			font-size: 24rpx;
			font-family: PingFangSC;
			line-height: 20rpx;
		}

		.section_3 {
			position: fixed;
			bottom: 0;
			width: 100%;
			padding-bottom: 45rpx;
			background-image: url('https://www.dlxx.top/static/images/0d7b8433face4c26f310aaff3feab4ca.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.equal-division {
				padding-top: 6rpx;

				.group_4 {
					flex: 1 1 250rpx;

					.image_4 {
						width: 48rpx;
						height: 48rpx;
					}

					.font_3 {
						font-size: 20rpx;
						font-family: PingFangSC;
						line-height: 20rpx;
					}

					.text_6 {
						color: #051a17;
					}

					.text_7 {
						color: #1e302e;
					}

					.text_8 {
						color: #00806b;
					}
				}

				.equal-division-item {
					padding: 12rpx 0 12rpx;
				}
			}
		}

		.zz {
			width: 100%;
			height: 100vh;
			position: fixed;
			bottom: 0;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			background-color: #00000090;


		}

		.auth-button::after {
			border: 0 !important;
		}

		.auth-button {
			background: none !important;
			margin: 0 !important;
		}

		.auth {
			padding: 80rpx 36rpx 20rpx;
			font-size: 26rpx;
		}

		.text_7s {
			color: #333;
			font-size: 26rpx;
			margin-top: -20rpx;
		}

		.image_6 {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			margin-top: 20rpx;
		}

		.nickname {
			padding: 20rpx;
			background-color: #ffffff;
			border-radius: 30rpx;
			height: 60rpx;
			width: 90%;
		}

		input {
			width: 100%;
		}

		.font_6 {
			font-size: 26rpx;
		}

		.text_9 {
			color: #a3a3a3;
			font-size: 22rpx;
			font-family: SourceHanSansCN;
			line-height: 20rpx;
		}

		.button_2 {
			background-color: #141414;
			width: 160rpx;
			height: 50rpx;
			border-radius: 25rpx;
		}

		.text_8 {
			font-size: 26rpx;
			color: #fff;
		}

		.button_3 {
			background-color: #141414;
			width: 600rpx;
			height: 80rpx;
			border-radius: 40rpx;
			margin: 20rpx auto;
			margin-top: 100rpx;
		}

		.text_10 {
			font-size: 30rpx;
			font-weight: bold;
			color: #fff;
		}
	}
</style>